<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<img v-bind:src="user.userImg" id="userDefaultImgBox">
			<p>{{ user.userName }}</p>
		</header>

		<!-- 个人信息部分 -->
		<ul class="userinfo">
			<li @click="changeImg">
				<p><i class="fa fa-user-circle-o"></i>我的头像</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="changePwd">
				<p><i class="fa fa-expeditedssl"></i>修改密码</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="logOut">
				<p><i class="fa fa-sign-out"></i>退出登陆</p>
				<i class="fa fa-angle-right"></i>
			</li>
		</ul>
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
	name: 'userCenter',
	data: function () {
		return {

			user: {}
		}
	},
	methods: {
		// 跳转到修改密码页面
		changePwd(){
			this.$router.push('/changePwd');
		},
		// 跳转到头像修改页面
		changeImg: function () {
			this.$router.push('/userImg');
		},
		// 获取用户信息
		getUserById: function (userId) {
			let that = this;
			let url = 'UserController/getUserById';
			this.$axios.post(url, this.$qs.stringify({ userId }))
				.then(resp => {
					that.user = resp.data;
				})
				.catch(err => {
					console.log(err);
				})
		},
		// 退出登录 (实际退出操作,依赖响应拦截器)
		logOut() {
			let url = 'UserController/logOut';
			this.$axios.post(url)
				.then(resp => {

				})
				.catch(err => {
					console.log(err);
				})
			// this.user = {};
			alert('退出成功');
		}
	},
	components: {
		Footer: Footer
	},
	created: function () {
		let user = this.$sessionGet('user');
		if (user != null) {
			this.getUserById(user.userId);
		}
	}
}
</script>

<style scoped="scoped">
/*************** 总容器 ***************/
.wrapper {
	width: 100%;
	height: 100%;
	background-color: #F5F5F5;
}

/*************** header ***************/
.wrapper header {
	width: 100%;
	height: 30vw;
	background-color: #0097FF;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 4.8vw;
}

.wrapper header img {
	width: 16vw;
	height: 16vw;
	border-radius: 8vw;
	margin-left: 5vw;
}

.wrapper header p {
	margin-left: 5vw;
	color: #fff;
	font-size: 5.6vw;
	font-weight: 700;
}

/*************** userinfo ***************/
.wrapper .userinfo {
	width: 100%;
}

.wrapper .userinfo li {
	width: 100%;
	height: 12vw;
	box-sizing: border-box;
	padding: 0 4vw;
	margin-top: 3.6vw;
	background-color: #fff;

	display: flex;
	justify-content: space-between;
	align-items: center;

	user-select: none;
	cursor: pointer;
}

.wrapper .userinfo li p {
	font-size: 4.2vw;
	color: #666;
}

.wrapper .userinfo li i {
	/*左右两边的图标样式一样*/
	font-size: 5vw;
	color: #0097FF;
	margin-right: 3vw;
}
</style>
